<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				user-select: none;
			}
			#box{
				width: 100%;
				height: 100vh;
				background: url(img/bj.jpg) no-repeat;
				background-size: 100% 100%;
				position: relative;
				overflow: hidden;
			}
			.red{
				position: absolute;
				width: 50px;
				height: 80px;
				top: 0px;
				left: 0px;
				cursor: pointer;
				animation: mv 3s linear;
			}
			#gx{
				position: absolute;
				top: 40%;
				left: 3%;
				width: 387px;
				height: 398px;
				background: url(img/gx.png) ;
				display: none;
				z-index: 999;
			}
			#count,#time,#money{
				text-align: center;
				font-size: 20px;
			}
			@keyframes mv{
				0%{
					top: 0%;
				}
				100%{
					top: 100%;
				}
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="count">0个</div>
			<div id="time"></div>
			<div id="gx">
				<div id="money">
					
				</div>
			</div>
		</div>
		
	</body>
	<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		let w = document.body.clientWidth
		let h = document.body.clientHeight
		var count=0
		var time=10
		var money=0
		const box = document.getElementById('box')
		function hb(){
			let ele =document.createElement('div')
			ele.className='red'
			let img = document.createElement('img')
			img.src=Math.random()>0.5?'img/hb_1.png':'img/hb_2.png'
			ele.appendChild(img)
			ele.style.left=Math.random()*w+'px'
			//红包尺寸
			ele.style.transform="scale("+Math.random()*3.5+")"
			ele.setAttribute('money',(Math.random()/10))//设置红包金额
		
			ele.onclick=function(){
				count+=1
				
				money=money+parseFloat(this.getAttribute('money'))
				//console.log(count)
				this.remove()
				let Count =document.getElementById('count')
				Count.innerHTML=count+'个'
			}
			let removehb=setInterval(function(){
				ele.remove()
			},3000)
			
			box.appendChild(ele)
		}
		timeout=setInterval(function(){
				let Time =document.getElementById('time')
				time--
				Time.innerHTML=time+'s'
			},1000)
		let createTime =setInterval(hb,200)
		//60s结束游戏
		let clear=setTimeout(function(){
			clearInterval(createTime)
			clearInterval(timeout)
		
			//document.getElementsByClassName('red').remove()
			
			document.getElementById('gx').style.display="block"
			document.getElementById('money').innerHTML="恭喜你获得"+money+"元"
			
			
			},10000)
		
		
	</script>
</html>
